import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View, Image, Text } from '@tarojs/components'
import { connect } from "react-redux"
import { queyElementYPosition } from '@src/utils/pageUtil'
import { fieldImg } from '@components/imgList'
import TeamPage from './team'
import ChartRoot from './chat'
import MsgInput from './msgInput'

import './index.scss'

class Game extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeTab: props.actionType
    }
  }

  componentWillReceiveProps (nextProps) {
    if(nextProps.actionType != this.state.activeTab) {
      this.setState({activeTab: nextProps.actionType})
    }
  }

  componentWillUnmount () { }

  componentDidShow () {

  }

  componentDidHide () { }

  /**
   * 日期选择滚动吸顶
   * @param {*} e 
   */
  onPageScroll = (e) =>{
    const { isFixed } = this.state || {}

    queyElementYPosition('#tabPane', this)
      .then((v) => {
        if(v.top < 1 && !isFixed) {
          this.setState({isFixed: true})
        }else if(v.top > 1 && isFixed){
          this.setState({isFixed: false})
        }
      })
      .catch((e) => console.error('query element y position failed.', e))
  }

  hanldeCall = () =>{
    Taro.showToast({title: '拨打电话'})
  }

  onTabChange = (key) =>{
    this.setState({ activeTab: key })
  }

  onMsgChange = (lastId) =>{
    this.setState({scrollIntoId: lastId})
  }

  render () {
    const { activeTab = 0, scrollIntoId, isFixed } = this.state || {}
    const { currentStore = {} } = this.props
    return (
      <View>
        <ScrollView scrollIntoView={scrollIntoId} className='gamePage' enableFlex scrollY onScroll={this.onPageScroll}>
          <View className='fieldImg'>
            <Image src={fieldImg['large']}/>
          </View>
          <View className='storeInfo'>
            <View className='name'>
              <View>{currentStore.name}</View>
            </View>
            <View className='addr'>{currentStore.addr}</View>
            <View className='phone' onClick={this.hanldeCall}>电话</View>
            <View className='time'>今天 9:00-22:00</View>
            {
              currentStore.tags && <View className='tags'>
                {
                  currentStore.tags.map((tag,index) => <View key={index} className='tag'>{tag}</View>)
                }
              </View>
            }
          </View>
          <View id='tabPane' className='tabPane'>
            <View className={`talbeBar${isFixed ? ' fixed' : ''}`}>
              <View className={`item left${activeTab == 0 ? ' active' : ''}`} onClick={() =>this.onTabChange(0)}>阵容</View>
              <View className={`item right${activeTab == 1 ? ' active' : ''}`} onClick={() =>this.onTabChange(1)}>聊天室<Text>38人</Text></View>
            </View>
            <View className={`paneItem${isFixed ? ' paneFixed' : ''}`}>
              {
                activeTab == 0 ? 
                <TeamPage/>
                :
                <ChartRoot onMsgChange={this.onMsgChange}/>
              }
            </View>
          </View>
        </ScrollView>
        {
          activeTab == 1 && 
          <MsgInput />
        }
      </View>
    )
  }
}

export default connect(({store}) =>({currentStore: store.currentStore}), {})(Game)

